<template>
  <div>
    <h3>自定义指令</h3>
    <p v-color='aa'>喜洋洋.灰太狼</p>
    <input type="text" v-focus>
    <my-input :uname='uname'></my-input>
  </div>
</template>

<script>
import MyInput from './components/MyInput.vue'
export default {
  components: { MyInput },
  data(){
    return {
      aa:'blue',
      uname:'zhangsan'
    }
  },
  directives: {
    // 对象写法
    // 指令:{
      // el表示使用这个指令的元素, obj.value表示指令的值
      // bind (el,obj){},  只会执行一次,可以在里面对元素进行样式设置
      // inserted (el,obj){},  只会执行一次,可以在里面进行行为操作,比如让元素获得焦点
      // update(el,obj) {},     数据更新后,子组件的页面不一定更新,才会执行
      // componentUpdated (el,obj) {},  数据更新后 ,包括子组件的数据页面更新后,才会执行
      // unbind(el,obj){}    指令解绑的时候(组件销毁),才会执行
    // },
      // 函数写法
      // 指令(el,obj){ }, 如果指令只有bind和updated方法,并且两个方法一样,则可以简写成函数写法

      color:{
        bind(el,obj){
          el.style.color=obj.value 
        },
        update(el,obj) {
          el.style.color=obj.value
        },
      },
      focus:{
        inserted(el){
          el.focus()
        }
      }
  }


}
</script>

<style>

</style>